<template>
	<view class="">
			<f-navbar title="校园社团" fontColor="#ffffff" bgColor="#ffa200" :scrollTop="scrollTop" navbarType='0'></f-navbar>
		<statement :text="text"></statement>
		<view class="min-width">
			 	<input type="text" class="inputBox" placeholder="  请输入信息" style="padding-left: 10rpx;">
		</view>
		<swiper class="swiper" circular :indicator-dots="false" :autoplay="true">
			<swiper-item v-for="(item,index) in bannerList">
				<image class="images" style="width: 100%;" mode="widthFix" :src="item.image"></image>
			</swiper-item>
		</swiper>
	<view class="min-width">
    
	
	<!-- 广告栏展示 -->
		<view class="min-width" style="margin-top: 30rpx;">
			<view class="flex imgBox">
				<view class="imgBoxleft">
          	   <!-- <image src="../../static/ggw.png" mode="widthFix" style="width: 100%;"></image> -->
				</view>

				<view class="imgBoxRight">
                  
					<view class="imgleft skill bbqImg"   @click="onJump('../confessionWall/index')">
                    <!-- <image src="../../static/school/bbq.jpeg" mode="widthFix" style="width: 100%;margin-top: -20rpx;"></image> -->
						   社团简讯
					</view>

					<view class="imgleft skill bbqImg" style="margin-top: 10rpx;">
						   <!-- <image src="../../static/mhjy.png" mode="widthFix" style="width: 100%;margin-top: 0rpx;"></image> -->
					    交流投票
				
					</view>

				</view>
			</view>

			<view class="flex" style="margin-top: 20rpx;">
				<view class="btnBox skill" >
                   	   <!-- <image src="../../static/school/chwl.png" mode="widthFix" style="width: 119%;margin-left: -10rpx;"></image> -->
				     加入社团
				</view>

				<view class="btnBox skill" @click="onJump('./resourceCommunity/resourceCommunity')">
                      <!-- <image src="../../static/school/sqyx.png" mode="widthFix" style="width: 119%;margin-left: -20rpx;"></image> -->
				    社团沙龙
				</view>

				<view class="btnBox skill" @click="onJump('../promotion/promotion')">
					 <!-- <image src="../../static/school/tgzq.jpg" mode="widthFix" style="width: 120%;margin-left:-20rpx;margin-top:-20rpx;"></image> -->
			    社团联谊
				</view>
			</view>

		</view>


    </view>
	</view>
</template>

<script>
	import statement from "@/components/statement/statement.vue"
	export default{
		components: {
			statement,
		},
		data(){
			return{
				text:"免责声明：本平台只负责发布、展示，所有信息与平台本身无关，平台不负任何责任。",
				bannerList: [{
						image: "../../../static/other/1.png"
					},
					{
						image: "../../../static/other/2.png"
					}
				],
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inputBox {
		width: 650rpx;
		height: 50rpx;
		background-color: #ececec;
		border-radius: 50rpx;
		margin: 30rpx auto;
		font-size: 26rpx;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.imgBoxleft {
		 width: 50rpx;
		 overflow: hidden;

	}

	.nav-list {
		padding: 30rpx 0 0 0;
		// margin: 4rpx 0 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	    width: 680rpx;
		background-color: #f4f4f4;
		margin-left: 35rpx;
	    margin-bottom: 30rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 20%;
            margin-bottom: 30rpx;
			image {
				width: 42rpx;
				margin: 0 auto;
				height: 42rpx;
			}

			view {
				font-size: 22rpx;
				color: #555;
				white-space: nowrap;
				margin-top: 16rpx;
			}
		}

		// .item:nth-child(n+5) {
		// 	margin-top: 30rpx;
		// }
	}

	.swiper {
		margin-top: 30rpx;
		height: 240rpx;

	}

	.imgBoxleft {
		width: 60%;
		height: 210rpx;
		background-color: #0c5546;
		border-radius: 10rpx;
	}

	.imgBoxRight {
		width: 48%;
		height: 210rpx;
		// background-color: #21bedd;

	}

	.imgleft {
		width: 90%;
		height: 100rpx;
		background-color: #dd06d3;
		margin-left: 10%;
		border-radius: 10rpx;
	}

	.imgRight {
		width: 48%;
		height: 100rpx;
		background-color: #dd06d3;
		border-radius: 10rpx;
	}

	.titleBox {
		text-align: center;
		height: 100rpx;
		background-color: #dd06d3;
		margin-top: 10rpx;
		line-height: 100rpx;

	}

	.imgBox {
		/* width: 650rpx;
		margin: 0 auto; */
	}

	.btnBox {
		width: 200rpx;
		height: 100rpx;
		background-color: #0c5546;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.btnRelease {
		width: 90rpx;
		height: 90rpx;
		background-color: #ff9500;
		border-radius: 50rpx;
		color: #ececec;
		line-height: 90rpx;
		text-align: center;
		position: fixed;
		right: 20rpx;
		bottom: 200rpx;
		font-size: 20rpx;
		z-index: 999;
			box-shadow: #5e5e5e 0 5rpx 10rpx;
		
	}
	
	.bbqImg{
		overflow: hidden;
	}
	
	.skill{
		line-height: 90rpx;
		text-align: center;
		color: #ffffff;
	}
</style>